<template>
  <page class="pt30">
    <el-row>
      <el-col :offset="1" :xs="22" :sm="16" :md="16" :lg="12" :xl="8">
        <el-form :model="form" ref="form" label-width="180px" v-if="!isUpdate || loadedState!== null">
          <el-form-item label="门店名称" prop="shopName" :rules="[{required: true, message: '请输入门店名称'}, isRepeat]">
            <el-input v-model="form.shopName" placeholder="请输入门店名称"></el-input>
          </el-form-item>
          <el-form-item label="公众号id(appid)" prop="appid" :rules="[{required: true, message: '请输入公众号id'}]">
            <el-input v-model="form.appid" placeholder="请输入公众号id"></el-input>
          </el-form-item>
          <el-form-item label="特约商户号id(mchid)" prop="macid" :rules="[{required: true, message: '请输入特约商户号id'}]">
            <el-input v-model="form.macid" placeholder="请输入特约商户号id"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone" :rules="[{required: true, message: '请输入联系电话'}, validateTelePhone]">
            <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
            <span></span>
          </el-form-item>
          <el-form-item label="经度(longitude)" prop="longitude" :rules="[{required: true, message: '请输入经度'}]">
            <el-input v-model="form.longitude" placeholder="请输入经度"></el-input>
          </el-form-item>
          <el-form-item label="纬度(latitude)" prop="latitude" :rules="[{required: true, message: '请输入经度'}]">
            <el-input v-model="form.latitude" placeholder="请输入经度"></el-input>
          </el-form-item>
          <el-form-item label="地址(address)" prop="address" :rules="[{required: true, message: '请输入地址'}]">
            <el-input v-model="form.address" placeholder="请输入地址"></el-input>
          </el-form-item>
          <el-form-item label="门店图片" prop="image" :rules="[{required: true, message: '请上传图片'}]">
            <single-img v-model="form.image"></single-img>
          </el-form-item>
          <el-form-item label="打印机账号" prop="printUser">
            <el-input v-model="form.printUser" placeholder="请输入打印机账号"></el-input>
          </el-form-item>
          <el-form-item label="打印机编号" prop="printSN">
            <el-input v-model="form.printSN" placeholder="请输入打印机编号"></el-input>
          </el-form-item>
          <el-form-item label="注册账号后生成的UKEY" prop="printUKey">
            <el-input v-model="form.printUKey" placeholder="请输入注册账号后生成的UKEY"></el-input>
          </el-form-item>
          <el-form-item label="是否对接线下" prop="butted">
            <el-switch v-model="form.butted"></el-switch>
          </el-form-item>
          <el-form-item label="客户端url" prop="clientUrl" v-if="form.butted"
                        :rules="[{required: true, message: '客户端url'}]">
            <el-input v-model="form.clientUrl" placeholder="客户端url"></el-input>
          </el-form-item>
          <el-form-item label="加油系统url" prop="outLineUrl" v-if="form.butted"
                        :rules="[{required: true, message: '加油系统url'}]">
            <el-input v-model="form.outLineUrl" placeholder="加油系统url"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button @click="$refs.form.resetFields()">重置</el-button>
            <el-button v-back>取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </page>
</template>

<script>
  import singleImg from '@/components/Uploadimg/singleImg'
  import {elValidate} from '@/utils/widget'
  import {status_prompt} from '@/utils/feedback'
  import {validatePhone, validateTel} from '@/utils/validate'

  const validateTelePhone = {
    validator: (rule, value, callback) => {
      if (validatePhone(value) || validateTel(value)) {
        callback()
      } else {
        callback(new Error('请输入正确的手机或电话'))
      }
    }
  }
  export default {
    name: 'shopListAdd',
    data() {
      return {
        isUpdate: this.$route.meta.update, // 是否为编辑模式
        loadedState: null, // 表单拉取状态 null:获取中, true:获取成功, false: 获取失败
        validateTelePhone,
        form: {
          id: this.$route.params.id,
          shopName: null,
          appid: null,
          phone: null,
          longitude: null,
          latitude: null,
          address: null,
          image: null,
          printUser: null,
          butted: null,
          clientUrl: null,
          outLineUrl: null
        }
      }
    },
    computed: {
      isRepeat() {
        const isRepeat = {
          validator: (rule, value, callback) => {
            if (this.$g.shopList.filter(x => x.id !== this.form.id).some(x => x.shopName == value)) {
              callback(new Error('门店名称已被使用'))
            } else {
              callback()
            }
          }, trigger: 'blur'
        }

        return isRepeat
      }
    },
    created() {
      if (this.isUpdate) this.get()
    },
    methods: {
      // 添加
      async add() {
        await status_prompt({
          ajax: () => this.$post_json('admin/shop/addShop', this.form),
          success_text: '添加成功',
          fail_text: '添加失败'
        }).then($g.shopListUpdate)
      },

      //更新
      async update() {
        await status_prompt({
          ajax: () => this.$post_json('admin/shop/updateShop', this.form),
          success_text: '修改成功',
          fail_text: '修改失败'
        }).then($g.shopListUpdate)
      },

      // 获取详情
      async get() {
        let {obj} = await this.$get_loading('/admin/shop/getShopById', {shopId: this.form.id}, {loaded: 'loadedState'})
        this.form = obj
      },

      // 提交表单
      async onSubmit() {
        await elValidate(this, 'form')
        await (this.isUpdate ? this.update() : this.add())
        this.$router.back()
      }
    },
    components: {
      singleImg
    }
  }
</script>

<style scoped>

</style>
